<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      :rules="rules"
      style="margin-top: 50px; margin-left: 40px"
    >
      <el-form-item label="登录账号" prop="loginName" style="width: 400px">
        <el-input v-model="form.loginName"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="userName" style="width: 400px">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" style="width: 400px">
        <el-select v-model="form.deptId" placeholder="请选择">
          <el-option
            v-for="item in dept"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户职位">
        <el-select v-model="form.position" placeholder="正式员工">
          <el-option label="正式员工" value="0"></el-option>
          <el-option label="实习生" value="1"></el-option>
          <el-option label="财务" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="基础工资" prop="basicSalary" style="width: 400px">
        <el-input
          v-model="form.basicSalary"
          @click="addsalary"
          @blur="add"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="奖金" prop="bonus" style="width: 400px">
        <el-input v-model="form.bonus" @blur="add"></el-input>
      </el-form-item>
      <el-form-item label="扣税" prop="taxDeduction" style="width: 400px">
        <el-input v-model="form.taxDeduction" @blur="add"></el-input>
      </el-form-item>
      <el-form-item label="实发工资" prop="netSalary" style="width: 400px">
        <el-input v-model="form.netSalary" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建用户</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addUser } from '@/api/user';
import { getDeptAll } from '@/api/dept';
export default {
  data() {
    return {
      form: {
        loginName: '',
        userName: '',
        deptId: '',
        position: '',
        basicSalary: 0,
        bonus: 0,
        taxDeduction: 0,
        netSalary: 0,
      },
      dept: [],
      rules: {
        loginName: [
          { required: true, trigger: 'blur', message: '登录名不能为空' },
        ],
        userName: [
          { required: true, trigger: 'blur', message: '用户名不能为空' },
        ],
        basicSalary: [
          { required: true, message: '基础工资不能为负数' },
          {
            //验证为非负数
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error('基础工资不能为负数'));
              } else {
                callback();
              }
            },
          },
        ],
        bonus: [
          { required: true, message: '奖金不能为负数' },
          {
            //验证为非负数
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error('奖金不能为负数'));
              } else {
                callback();
              }
            },
          },
        ],
        taxDeduction: [
          { required: true, message: '税额不能为负数' },
          {
            //验证为非负数
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error('税额不能为负数'));
              } else {
                callback();
              }
            },
          },
        ],
        netSalary: [
          { required: true, message: '薪水不能为负数' },
          {
            //验证为非负数
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error('薪水不能为负数'));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  created() {
    getDeptAll().then((resp) => {
      this.dept = resp.data;
      console.log(this.dept);
    });
  },
  methods: {
    addsalary() {
      console.log(form.salary);
    },
    add() {
      this.form.netSalary =
        parseInt(this.form.basicSalary) +
        parseInt(this.form.bonus) -
        parseInt(this.form.taxDeduction);
    },
    onSubmit() {
      addUser(this.form).then((resp) => {
        this.$message({
          message: '增加用户成功',
          type: 'success',
        });
        this.$router.push({ path: this.redirect || '/' });
      });
      // 跳到首页
    },
  },
};
</script>
